<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    // vue2响应式原理就是通过Object.defineProperty  新增的属性 或删除属性 是无法监听到的  vue2解决方式是this.$set()
    // vue3使用的是proxy代理对象

    let obj = {
      name: 'lll',
      age: 18,
      gender: '男'
    }


    let objProxy = new Proxy(obj, { //一共13个捕获器  对应的Reflact有13个方法
      get: function (target, key) {
        console.log(`正在获取属性${key}的值`, target[key]);
        return target[key]
      },
      set: function (target, key, value) {
        target[key] = value
        console.log(`正在将属性${key}的值设置为`, value);
      },
      // 监听删除属性的捕获器
      deleteProperty: function (target, key) {
        delete target.name    //target[name]
      },
      // 监听属性是否存在对象中
      has: function (target, key) {
        return key in target
      }
    })
    // objProxy.name

    // objProxy.name = 'pixiaolang'

    function foo(num1, num2) {
      console.log(this, num1, num2);
    }

    let fooProxy = new Proxy(foo, {
      apply: function (target, thisArg, otherArg) {
        console.log(target, "是函数本身");
        console.log(thisArg, "是传入的this指向");
        console.log(otherArg, "是传入的参数列表");
        target.apply(thisArg, otherArg)
      }
    })

    fooProxy.apply('123', [111, 222])


  </script>

</body>

</html>